مدیریت تست برخورد WebXR: پیاده سازی یک سیستم پرتاب اشعه برای تجربیات فراگیر

ظهور فناوری های واقعیت افزوده (AR) و واقعیت مجازی (VR) امکانات جدید هیجان انگیزی را برای ایجاد تجربیات دیجیتالی فراگیر و تعاملی باز کرده است. WebXR، یک API جاوا اسکریپت برای دسترسی به قابلیت های VR و AR در مرورگرهای وب، توسعه دهندگان را در سراسر جهان قادر می سازد تا این تجربیات را در دستگاه های مختلف ایجاد کنند. یک جزء کلیدی در ایجاد تجربیات WebXR جذاب، توانایی تعامل با محیط مجازی است. اینجاست که WebXR Hit Test Manager و پرتاب اشعه وارد عمل می شوند.

پرتاب اشعه چیست و چرا مهم است؟

پرتاب اشعه، در زمینه WebXR، تکنیکی است که برای تعیین اینکه آیا یک اشعه مجازی (یک خط مستقیم) با یک سطح دنیای واقعی که توسط سیستم AR شناسایی شده یا یک شی مجازی در محیط VR تقاطع دارد یا خیر، استفاده می شود. آن را مانند تاباندن یک اشاره گر لیزری به اطراف خود و دیدن اینکه کجا ضربه می زند، در نظر بگیرید. WebXR Hit Test Manager ابزارهایی را برای انجام این پرتاب های اشعه و بازیابی نتایج فراهم می کند. این اطلاعات برای انواع تعاملات بسیار مهم است، از جمله:

• قرار دادن شی: اجازه دادن به کاربران برای قرار دادن اشیاء مجازی بر روی سطوح دنیای واقعی، مانند قرار دادن یک صندلی مجازی در اتاق نشیمن خود (AR). کاربری را در توکیو در نظر بگیرید که قبل از خرید مبلمان، آپارتمان خود را به صورت مجازی تزئین می کند.
• هدف گیری و انتخاب: فعال کردن کاربران برای انتخاب اشیاء مجازی یا تعامل با عناصر UI با استفاده از یک اشاره گر یا دست مجازی (AR/VR). جراحی را در لندن تصور کنید که از AR برای قرار دادن اطلاعات تشریحی بر روی بیمار استفاده می کند و مناطق خاصی را برای بررسی انتخاب می کند.
• ناوبری: حرکت دادن آواتار کاربر در دنیای مجازی با اشاره به یک مکان و دستور دادن به او برای حرکت به آنجا (VR). موزه ای در پاریس ممکن است از VR برای اجازه دادن به بازدیدکنندگان برای حرکت در نمایشگاه های تاریخی استفاده کند.
• تشخیص حرکت: ترکیب تست برخورد با ردیابی دست برای تفسیر حرکات کاربر، مانند نیشگون گرفتن برای بزرگنمایی یا کشیدن انگشت برای پیمایش (AR/VR). این می تواند در یک جلسه طراحی مشارکتی در سیدنی استفاده شود، جایی که شرکت کنندگان مدل های مجازی را با هم دستکاری می کنند.

درک WebXR Hit Test Manager

WebXR Hit Test Manager بخش مهمی از WebXR API است که پرتاب اشعه را تسهیل می کند. این API متدهایی را برای ایجاد و مدیریت منابع تست برخورد فراهم می کند که مبدا و جهت اشعه را تعریف می کنند. سپس مدیر از این منابع برای انجام تست های برخورد با دنیای واقعی (در AR) یا دنیای مجازی (در VR) استفاده می کند و اطلاعاتی در مورد هر گونه تقاطع برمی گرداند. مفاهیم کلیدی عبارتند از:

• XRFrame: XRFrame نشان دهنده یک عکس فوری در زمان از صحنه XR است، از جمله وضعیت بیننده و هر صفحه یا ویژگی شناسایی شده. تست های برخورد در برابر XRFrame انجام می شود.
• XRHitTestSource: نشان دهنده منبع اشعه ای است که باید پرتاب شود. مبدا (جایی که اشعه شروع می شود) و جهت (جایی که اشعه به آن اشاره می کند) را تعریف می کند. شما معمولاً یک XRHitTestSource برای هر روش ورودی ایجاد می کنید (به عنوان مثال، یک کنترلر، یک دست).
• XRHitTestResult: حاوی اطلاعاتی درباره یک ضربه موفق، از جمله وضعیت (موقعیت و جهت گیری) نقطه تقاطع و فاصله از مبدا اشعه است.
• XRHitTestTrackable: نشان دهنده یک ویژگی ردیابی شده (مانند یک صفحه) در دنیای واقعی است.

پیاده سازی یک سیستم تست برخورد پایه

بیایید مراحل پیاده سازی یک سیستم تست برخورد WebXR پایه با استفاده از جاوا اسکریپت را بررسی کنیم. این مثال بر روی قرار دادن شی AR تمرکز دارد، اما اصول را می توان برای سناریوهای تعاملی دیگر تطبیق داد.

مرحله 1: درخواست جلسه WebXR و پشتیبانی از تست برخورد

ابتدا، باید یک جلسه WebXR درخواست کنید و اطمینان حاصل کنید که ویژگی 'hit-test' فعال است. این ویژگی برای استفاده از Hit Test Manager مورد نیاز است.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

توضیح:

• `navigator.xr.requestSession('immersive-ar', ...)`: یک جلسه AR فراگیر را درخواست می کند. آرگومان اول نوع جلسه را مشخص می کند ('immersive-ar' برای AR، 'immersive-vr' برای VR).
• `requiredFeatures: ['hit-test']`: به طور مهمی، ویژگی 'hit-test' را درخواست می کند و Hit Test Manager را فعال می کند.
• `xrSession.requestHitTestSource(...)`: یک XRHitTestSource ایجاد می کند، که مبدا و جهت اشعه را تعریف می کند. در این مثال اولیه، ما از فضای مرجع 'viewer' استفاده می کنیم که مربوط به دیدگاه کاربر است.

مرحله 2: ایجاد حلقه رندر

حلقه رندر قلب برنامه WebXR شما است. این جایی است که صحنه را به روز می کنید و هر فریم را رندر می کنید. در داخل حلقه رندر، تست برخورد را انجام می دهید و موقعیت شی مجازی خود را به روز می کنید.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

توضیح:

• `xrFrame.getHitTestResults(xrHitTestSource)`: تست برخورد را با استفاده از XRHitTestSource ایجاد شده قبلی انجام می دهد. این یک آرایه از اشیاء XRHitTestResult را برمی گرداند که نشان دهنده تمام تقاطع های یافت شده است.
• `hitTestResults[0]`: ما اولین نتیجه برخورد را می گیریم. در سناریوهای پیچیده تر، ممکن است بخواهید از طریق تمام نتایج تکرار کنید و مناسب ترین را انتخاب کنید.
• `hit.getPose(xrReferenceSpace)`: وضعیت (موقعیت و جهت گیری) ضربه را در فضای مرجع مشخص شده بازیابی می کند.
• `object3D.position.set(...)` و `object3D.quaternion.set(...)`: موقعیت و جهت گیری شی مجازی خود (object3D) را برای مطابقت با وضعیت ضربه به روز کنید. این شی را در نقطه تقاطع قرار می دهد.
• `object3D.visible = true/false`: دید شی مجازی را کنترل می کند و آن را فقط زمانی که یک ضربه پیدا می شود، ظاهر می کند.

مرحله 3: تنظیم صحنه سه بعدی خود (مثال با Three.js)

این مثال از Three.js، یک کتابخانه سه بعدی جاوا اسکریپت محبوب، برای ایجاد یک صحنه ساده با یک مکعب استفاده می کند. می توانید این را برای استفاده از کتابخانه های دیگر مانند Babylon.js یا A-Frame تطبیق دهید.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

مهم: مطمئن شوید که کتابخانه Three.js را در فایل HTML خود قرار دهید:

            


            

              
                Copy
              
            
          

تکنیک های پیشرفته و بهینه سازی ها

پیاده سازی پایه بالا یک پایه برای تست برخورد WebXR فراهم می کند. در اینجا چند تکنیک پیشرفته و بهینه سازی برای در نظر گرفتن هنگام ساخت تجربیات پیچیده تر آورده شده است:

1. فیلتر کردن نتایج تست برخورد

در برخی موارد، ممکن است بخواهید نتایج تست برخورد را فیلتر کنید تا فقط انواع خاصی از سطوح را در نظر بگیرید. به عنوان مثال، ممکن است فقط بخواهید اجازه دهید شی بر روی سطوح افقی (کف یا میز) قرار گیرد. می توانید این کار را با بررسی بردار نرمال وضعیت ضربه و مقایسه آن با بردار بالا انجام دهید.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. استفاده از منابع ورودی گذرا

برای روش های ورودی پیشرفته تر مانند ردیابی دست، معمولاً از منابع ورودی گذرا استفاده می کنید. منابع ورودی گذرا نشان دهنده رویدادهای ورودی موقت، مانند ضربه زدن انگشت یا حرکت دست هستند. WebXR Input API به شما امکان می دهد به این رویدادها دسترسی داشته باشید و منابع تست برخورد را بر اساس موقعیت دست کاربر ایجاد کنید.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. بهینه سازی عملکرد

تجربیات WebXR می توانند از نظر محاسباتی فشرده باشند، به خصوص در دستگاه های تلفن همراه. در اینجا چند نکته برای بهینه سازی عملکرد آورده شده است:

• کاهش فرکانس تست های برخورد: انجام تست های برخورد در هر فریم می تواند گران باشد. کاهش فرکانس را در نظر بگیرید، به خصوص اگر حرکت کاربر کند باشد. می توانید از یک تایمر استفاده کنید یا فقط زمانی که کاربر یک عمل را آغاز می کند، تست های برخورد را انجام دهید.
• استفاده از سلسله مراتب حجم محدود (BVH): اگر یک صحنه پیچیده با اشیاء زیادی دارید، استفاده از BVH می تواند به طور قابل توجهی سرعت تشخیص برخورد را افزایش دهد. Three.js و Babylon.js پیاده سازی های BVH را ارائه می دهند.
• LOD (سطح جزئیات): از سطوح مختلف جزئیات برای مدل های سه بعدی خود بسته به فاصله آنها از دوربین استفاده کنید. این تعداد چند ضلعی هایی را که باید برای اشیاء دور رندر شوند کاهش می دهد.
• حذف انسداد: اشیایی را که در پشت اشیاء دیگر پنهان شده اند رندر نکنید. این می تواند به طور قابل توجهی عملکرد را در صحنه های پیچیده بهبود بخشد.

4. رسیدگی به فضاهای مرجع مختلف

WebXR از فضاهای مرجع مختلفی پشتیبانی می کند که سیستم مختصاتی را که برای ردیابی موقعیت و جهت گیری کاربر استفاده می شود، تعریف می کند. رایج ترین فضاهای مرجع عبارتند از:

• محلی: مبدا سیستم مختصات نسبت به موقعیت شروع کاربر ثابت است. این برای تجربیاتی مناسب است که در آن کاربر در یک منطقه کوچک باقی می ماند.
• کف محدود: مبدا در سطح کف است و صفحه XZ نشان دهنده کف است. این برای تجربیاتی مناسب است که در آن کاربر می تواند در یک اتاق حرکت کند.
• نامحدود: مبدا ثابت نیست و کاربر می تواند آزادانه حرکت کند. این برای تجربیات AR در مقیاس بزرگ مناسب است.

انتخاب فضای مرجع مناسب برای اطمینان از اینکه تجربه WebXR شما به درستی در محیط های مختلف کار می کند، مهم است. هنگام ایجاد جلسه XR می توانید یک فضای مرجع خاص را درخواست کنید.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. مقابله با سازگاری دستگاه

WebXR یک فناوری نسبتاً جدید است و همه مرورگرها و دستگاه ها به طور یکسان از آن پشتیبانی نمی کنند. بررسی پشتیبانی WebXR قبل از تلاش برای مقداردهی اولیه یک جلسه WebXR مهم است.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

شما همچنین باید تجربه WebXR خود را بر روی انواع دستگاه ها آزمایش کنید تا مطمئن شوید که به درستی کار می کند.

ملاحظات بین المللی سازی

هنگام توسعه برنامه های WebXR برای مخاطبان جهانی، مهم است که بین المللی سازی (i18n) و محلی سازی (l10n) را در نظر بگیرید.

• متن و عناصر UI: از یک کتابخانه محلی سازی برای ترجمه متن و عناصر UI به زبان های مختلف استفاده کنید. اطمینان حاصل کنید که طرح بندی UI شما می تواند طول های مختلف متن را در خود جای دهد. به عنوان مثال، کلمات آلمانی تمایل دارند طولانی تر از کلمات انگلیسی باشند.
• واحدهای اندازه گیری: از واحدهای اندازه گیری مناسب برای مناطق مختلف استفاده کنید. به عنوان مثال، از متر و کیلومتر در اکثر کشورها استفاده کنید، اما از فوت و مایل در ایالات متحده و انگلستان استفاده کنید. به کاربران اجازه دهید واحدهای اندازه گیری ترجیحی خود را انتخاب کنند.
• فرمت های تاریخ و زمان: از فرمت های تاریخ و زمان مناسب برای مناطق مختلف استفاده کنید. به عنوان مثال، از فرمت YYYY-MM-DD در برخی کشورها و فرمت MM/DD/YYYY در کشورهای دیگر استفاده کنید.
• ارزها: ارزها را در فرمت مناسب برای مناطق مختلف نمایش دهید. از یک کتابخانه برای مدیریت تبدیل ارز استفاده کنید.
• حساسیت فرهنگی: از تفاوت های فرهنگی آگاه باشید و از استفاده از تصاویر، نمادها یا زبانی که ممکن است برای برخی فرهنگ ها توهین آمیز باشد، خودداری کنید. به عنوان مثال، برخی از حرکات دست ممکن است معانی متفاوتی در فرهنگ های مختلف داشته باشند.

ابزارها و منابع توسعه WebXR

چندین ابزار و منبع می توانند به شما در توسعه WebXR کمک کنند:

• Three.js: یک کتابخانه سه بعدی جاوا اسکریپت محبوب برای ایجاد تجربیات مبتنی بر WebGL.
• Babylon.js: یک موتور سه بعدی جاوا اسکریپت قدرتمند دیگر با تمرکز بر پشتیبانی از WebXR.
• A-Frame: یک چارچوب وب برای ساخت تجربیات VR با استفاده از HTML.
• WebXR Emulator: یک افزونه مرورگر که به شما امکان می دهد تجربیات WebXR را بدون نیاز به دستگاه VR یا AR فیزیکی آزمایش کنید.
• WebXR Device API Specification: مشخصات رسمی WebXR از W3C.
• Mozilla Mixed Reality Blog: یک منبع عالی برای یادگیری در مورد WebXR و فناوری های مرتبط.

نتیجه

WebXR Hit Test Manager یک ابزار قدرتمند برای ایجاد تجربیات AR/VR تعاملی و فراگیر است. با درک مفاهیم پرتاب اشعه و Hit Test API، می توانید برنامه های جذابی بسازید که به کاربران امکان می دهد به روشی طبیعی و شهودی با دنیای مجازی تعامل داشته باشند. با ادامه تکامل فناوری WebXR، امکانات ایجاد تجربیات نوآورانه و جذاب بی پایان است. به یاد داشته باشید که کد خود را برای عملکرد بهینه کنید و هنگام توسعه برای مخاطبان جهانی، بین المللی سازی را در نظر بگیرید. چالش ها و پاداش های ساخت نسل بعدی تجربیات فراگیر وب را در آغوش بگیرید.